<template>
	<div class="rightcontainer">
		<div class="rightmain">
			<div class="header">
				<span>个人资料</span>
				<el-button type="primary" class="infobtn" @click="tosave">修 改</el-button>
			</div>
			<el-form ref="form" :model="form" label-width="97px">
				<div class="bigform">
					<div class="form">
						<el-form-item label="姓 名">
							<span class="valfont">{{form.nickName}}</span>
						</el-form-item>
						<el-form-item label="身份证号">
							<span class="valfont">{{form.userName}}</span>
						</el-form-item>
						<el-form-item label="民 族">
							<span class="valfont">{{form.nation?getarrname(form.nation,nations,'label','value'):''}}</span>
						</el-form-item>
						<el-form-item label="最高学历">
							<span class="valfont">{{form.education?getarrname(form.education,xuelis,'label','value'):''}}</span>
						</el-form-item>
						<el-form-item label="专 业">
							<span class="valfont">{{form.zhuanye}}</span>
						</el-form-item>
						<el-form-item label="是否统招">
							<span class="valfont">{{form.recruitment=='1'?'是':(form.recruitment=='2'?'否':'')}}</span>
						</el-form-item>
						<el-form-item label="毕业时间">
							<span class="valfont">{{form.schoolTime}}</span>
						</el-form-item>
						<el-form-item label="电子邮箱">
							<span class="valfont">{{form.email}}</span>
						</el-form-item>
						<el-form-item label="工作单位">
							<span class="valfont">{{form.company}}</span>
						</el-form-item>
						<el-form-item label="工作岗位">
							<span class="valfont">{{form.zhiwu}}</span>
						</el-form-item>
					</div>
					<div class="form">
						<el-form-item label="报名照片" style="margin-bottom:0;" v-if="form.avatar">
							<el-upload class="avatar-uploader" disabled>
								<img :src="form.avatar" class="avatar">
							</el-upload>
						</el-form-item>
						<el-form-item label="报名照片" v-else>
							<div style="color:#ccc;">未上传</div>
						</el-form-item>
						<el-form-item label="年 龄">
							<span class="valfont">{{autoage}}</span>
						</el-form-item>
						<el-form-item label="性 别">
							<span class="valfont">{{form.sex=='0'?'男':(form.sex=='1'?'女':'')}}</span>
						</el-form-item>
						<el-form-item label="政治面貌">
							<span class="valfont">{{form.zhegnzhiType?getarrname(form.zhegnzhiType,politics,'label','value'):''}}</span>
						</el-form-item>
						<el-form-item label="毕业院校">
							<span class="valfont">{{form.school}}</span>
						</el-form-item>
						<el-form-item label="学 位">
							<span class="valfont">{{form.degree?getarrname(form.degree,degs,'label','value'):''}}</span>
						</el-form-item>
						<el-form-item label="是否全日制">
							<span class="valfont">{{form.fullEducation=='1'?'是':(form.fullEducation=='2'?'否':'')}}</span>
						</el-form-item>
						<el-form-item label="联系电话">
							<span class="valfont">{{form.phone}}</span>
						</el-form-item>
					</div>
				</div>
				<el-form-item label="通讯地址">
					<el-cascader v-if="areaarr" v-model="areaarr" :options="areajson" :props="{value:'id',label:'name'}" style="width:333px;float:left;margin-right:20px;" disabled></el-cascader>
					<span class="valfont">{{form.address}}</span>
				</el-form-item>
				<el-form-item label="教育经历">
					<el-table border :data="form.eduExperience" stripe style="width: 100%" :header-cell-style="{backgroundColor: '#a4d0f4', color: '#134B9F', fontWeight: 'bold',height:'48px',}">
						<el-table-column label="开始时间" align="left" header-align="center">
							<template slot-scope="scope">
								{{scope.row.startdate}}
							</template>
						</el-table-column>
						<el-table-column label="结束时间" align="left" header-align="center">
							<template slot-scope="scope">
								{{scope.row.enddate}}
							</template>
						</el-table-column>
						<el-table-column label="学校名称" align="left" header-align="center">
							<template slot-scope="scope">
								{{scope.row.school}}
							</template>
						</el-table-column>
						<el-table-column label="学历" align="left" header-align="center">
							<template slot-scope="scope">
								{{scope.row.education}}
							</template>
						</el-table-column>
						<el-table-column label="专业" align="left" header-align="center">
							<template slot-scope="scope">
								{{scope.row.special}}
							</template>
						</el-table-column>
					</el-table>
				</el-form-item>
				<el-form-item label="工作经历">
					<el-table border :data="form.workExperience" stripe style="width: 100%" :header-cell-style="{backgroundColor: '#a4d0f4', color: '#134B9F', fontWeight: 'bold',height:'48px',}">
						<el-table-column label="开始时间" align="left" header-align="center">
							<template slot-scope="scope">
								{{scope.row.startdate}}
							</template>
						</el-table-column>
						<el-table-column label="结束时间" align="left" header-align="center">
							<template slot-scope="scope">
								{{scope.row.enddate}}
							</template>
						</el-table-column>
						<el-table-column label="单位名称" align="left" header-align="center">
							<template slot-scope="scope">
								{{scope.row.company}}
							</template>
						</el-table-column>
						<el-table-column label="岗位" align="left" header-align="center">
							<template slot-scope="scope">
								{{scope.row.job}}
							</template>
						</el-table-column>
						<el-table-column label="岗位职责" align="left" header-align="center">
							<template slot-scope="scope">
								{{scope.row.jobwork}}
							</template>
						</el-table-column>
					</el-table>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	import config from "@/js/config";
	import Utils from "@/js/utils";
	import { mapState, mapMutations } from 'vuex'
	export default {
		data() {
			return {
				areajson:[],
				areaarr:[],
				nations: [],
				politics: [],
				degs: [],
				xuelis:[],
				uploadbaseurl: config.url,
				staticbaseurl: config.staticurl,
				uploadheaders: {
					Authorization: Utils.getToken()
				},
				form: {
					id:null,
					nickName: '',
					userName: '',
					nation: null,
					education: null,
					zhuanye: '',
					recruitment: null,
					schoolTime: null,
					email: '',
					phone: '',
					avatar: '',
					sex: '',
					zhegnzhiType: null,
					school: '',
					degree: null,
					fullEducation: null,
					address:'',
					sheng:'',
					shi:'',
					qu:'',
					eduExperience:[],
					workExperience:[],
					company:'',
					zhiwu:''
				}
			};
		},
		computed: {
			autoage(){
				let idNumber=this.form.userName
				if (!idNumber || idNumber.length !== 18) {
					return ''
				}
				
				const today = new Date();
				const birthDate = new Date(idNumber.substring(6, 10), idNumber.substring(10, 12) - 1, idNumber.substring(12, 14));
			 
				let age = today.getFullYear() - birthDate.getFullYear();
				const m = today.getMonth() - birthDate.getMonth();
				if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
					age--;
				}
				return age;
			}
		},
		mounted() {
			this.getbaseinfo()
			this.getnation()
			this.getface()
			this.getdegs()
			this.getxueli()
			this.getareajson()
		},
		methods: {
			getarrname(val,arr,label,zvalue){
				for(let i in arr){
					if(arr[i][zvalue]==val){
						return arr[i][label]
					}
				}
			},
			getbaseinfo(){
				this.$api.Usercenter.Getuserinfo().then(res=>{
					this.form.id=res.data.id
					this.form.avatar=res.data.avatar
					this.form.degree=res.data.degree
					this.form.education=res.data.education
					this.form.email=res.data.email
					if(res.data.fullEducation){
						this.form.fullEducation=res.data.fullEducation+''
					}
					
					this.form.zhuanye=res.data.zhuanye
					this.form.nation=res.data.nation
					this.form.phone=res.data.phone 
					this.form.zhegnzhiType=res.data.zhegnzhiType 
					if(res.data.recruitment){
						this.form.recruitment=res.data.recruitment+''
					}
					
					this.form.school=res.data.school
					this.form.schoolTime=res.data.schoolTime
					this.form.nickName=res.data.nickName
					this.form.userName=res.data.userName
					this.form.sex=res.data.sex
					console.log('sex',this.form.sex)
					this.form.company=res.data.company
					this.form.zhiwu=res.data.zhiwu
					this.form.address=res.data.address
					this.form.eduExperience=JSON.parse(res.data.eduExperience)
					this.form.workExperience=JSON.parse(res.data.workExperience)
					if(res.data.sheng && res.data.shi && res.data.qu){
						this.areaarr=[res.data.sheng,res.data.shi,res.data.qu]
						this.form.sheng=res.data.sheng
						this.form.shi=res.data.shi
						this.form.qu=res.data.qu
					}
				})
			},
			tosave(){
				this.$router.push({ name: 'Userinfo'})
			},
			getnation() {
				this.$api.Join.Getnation({ code: 'nation' }).then(res => {
					this.nations = res.data.items
				})
			},
			getdegs() {
				this.$api.Join.Getdegs({ code: 'academic_degree' }).then(res => {
					this.degs = res.data.items
				})
			},
			getareajson() {
				this.$api.Usercenter.Getareajson().then(res => {
					this.areajson=res.data
				})
			},
			getxueli() {
				this.$api.Join.Getxueli({ code: 'education' }).then(res => {
					this.xuelis = res.data.items
				})
			},
			getface() {
				this.$api.Join.Getface({ code: 'politics' }).then(res => {
					this.politics = res.data.items
				})
			},
			getAgeFromId(idNumber) {
			    if (!idNumber || idNumber.length !== 18) {
			        throw new Error('Invalid ID number');
			    }
			 
			    const today = new Date();
			    const birthDateString = idNumber.substring(6, 14); // 提取出生日期字符串
			    const birthDate = new Date(
			        birthDateString.substring(0, 4), // 年
			        parseInt(birthDateString.substring(4, 6)) - 1, // 月（月份从0开始计数）
			        birthDateString.substring(6, 8) // 日
			    );
			 
			    let age = today.getFullYear() - birthDate.getFullYear();
			    // 获取今年的“生日”
			    const thisYearBirthday = new Date(
			        today.getFullYear(),
			        birthDate.getMonth(),
			        birthDate.getDate()
			    );
			    // 如果今天的日期还没过今年的生日，则年龄减1
			    if (today < thisYearBirthday) {
			        age--;
			    }
			 
			    return age;
			}
		},
	};
</script>

<style lang="less" scoped>
	/deep/ .el-table__header {
	  height: 48px !important;
	  
	}
	/deep/ .el-table__header .el-table__cell{
		padding: 2px 0 !important;
	}
	/deep/ .el-form-item__label {
		text-align: left !important;
	}
	.valfont{
		color:#333;
	}
	.tips1 {
		color: #f00;
		font-size: 13px;
		position: absolute;
		top: 0;
		right: 0;
	}

	.tips {
		color: #f00;
		font-size: 13px;
		position: absolute;
		left: 0;
		bottom: -29px;
	}

	.rightcontainer {
		width: 920px;
		margin: 0 auto 40px;
		overflow: hidden;

		.w100 {
			width: 100%;
		}

		.rightmain {
			width: 100%;
			margin: 20px 0;

			
			.savebtn{
				display:flex;
				justify-content:center;
				align-items:center;
				width:100%;
				height:80px;
				.infobtn{
						background-color:#134B9F;
						border:none;
					}
			}
			.header {
				display:flex;
				flex-direction:row;
				align-items:center;
				justify-content:space-between;
				margin-bottom: 10px;
				span{
					letter-spacing: 2px;
					border-bottom: 2px solid #134B9F;
					color: #134B9F;
					font-size: 20px;
					line-height: 28px;
					font-weight: bold;
					padding-bottom: 9px;
				}
				.infobtn{
					background-color:#134B9F;
					border:none;
				}
			}
			.bigform {
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin-top: 20px;
				// margin-bottom: 15px;
				.form {
					width: 430px;
					min-height: 300px;

					/deep/ .avatar-uploader .el-upload {
						border: 1px dashed #d9d9d9;
						border-radius: 6px;
						cursor: pointer;
						position: relative;
						overflow: hidden;
					}

					/deep/ .avatar-uploader .el-upload:hover {
						border-color: #409EFF;
					}

					/deep/ .avatar-uploader-icon {
						font-size: 28px;
						color: #8c939d;
						width: 168px;
						height: 168px;
						line-height: 168px;
						text-align: center;
					}

					/deep/ .avatar {
						width: 168px;
						height: 168px;
						display: block;
					}
				}

			}
		}
	}
</style>
